<template>
	<div id="container">
		<el-dropdown
			class="RodeInfo-elDropdown"
			:class="isChosen == true ? 'chosen' : ''"
			trigger="click"
			@command="handleCommand"
		>
			<span class="el-dropdown-link title">
				路况信息
				<i class="el-icon-arrow-down el-icon--right"></i>
			</span>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item command="on">
					<img src="img/交通信号灯.png" alt="" />
					查看信息
				</el-dropdown-item>
				<el-dropdown-item command="off">
					<img src="img/关闭_操作_jurassic.png" alt="" />
					关闭信息
				</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
		<el-dialog
			title="路况信息"
			v-el-drag-dialog
			:visible.sync="dialogTableVisible"
			width="60%"
			:modal="false"
			:before-close="handleClose"
			:close-on-click-modal="false"
			center
		>
			<div class="div-search">
				<input
					type="text"
					v-model="searchValue"
					@input="handleinput"
					placeholder="输入关键字查询"
				/>
				<button><i class="el-icon-refresh" @click="refresh"></i></button>
				<button>
					<i class="el-icon-s-grid"></i>
					<i class="el-icon-caret-bottom"></i>
				</button>
			</div>
			<el-table
				class="table-content"
				:data="trafficInfoData"
				:row-class-name="tableRowClassName"
				border
			>
				<el-table-column
					prop="user_name"
					label="用户名"
					width="150"
				></el-table-column>
				<el-table-column
					prop="event_type"
					label="事件类型"
					width="150"
				></el-table-column>
				<el-table-column
					prop="event_addr"
					label="事件地址"
					width="300"
				></el-table-column>
				<el-table-column
					prop="event_mark"
					label="附近建筑"
					width="120"
				></el-table-column>
				<el-table-column
					prop="event_time"
					label="发生时间"
					width="200"
				></el-table-column>
				<el-table-column
					prop="event_describe"
					label="事件描述"
				></el-table-column>
				<el-table-column header-align="center" label="操作" width="160">
					<template slot-scope="scope">
						<el-button
							v-show="scope.row.event_status != 0"
							type="success"
							size="small"
							disabled
						>
							{{ scope.row.event_status == '2' ? '已通过' : '已忽略' }}
						</el-button>
						<el-button
							v-show="scope.row.event_status == 0"
							@click="handleClickPass(scope.row.event_id)"
							type="primary"
							size="small"
						>
							通过
						</el-button>
						<el-button
							@click="handleClickIgnore(scope.row.event_id)"
							v-show="scope.row.event_status == 0"
							type="danger"
							size="small"
						>
							忽略
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页器 -->
			<div class="page-box">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="this.page"
					:page-sizes="[3, 5, 10]"
					:page-size="100"
					layout="total, sizes, prev, pager, next, jumper"
					:total="this.total"
				></el-pagination>
				<div class="page-box"></div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import elDragDialog from '../../directive/el-dragDialog'; //导入自定义弹窗拖拽
export default {
	name: 'RodeInfo',
	directives: {
		// 自定义拖拽弹窗配置
		elDragDialog,
	},
	created() {},
	data() {
		return {
			isChosen: false, //控制菜单样式
			dialogTableVisible: false, //控制弹窗的显隐
			trafficInfoData: [], //路况信息数据，分页
			trafficInfoAllData: [], //全部路况信息数据，未分页
			trafficInfoSearch: [], //搜索到的包含关键字的数据
			searchValue: '', //查询关键字
			isSearchState: false, //是否处于搜索模式
			isChange: 1, //监听审核事件
			total: 0, //事件总条数
			page: 1, //当前页码数
			size: 3, //每页显示数
		};
	},
	watch: {
		// 监听审核，审核通过则重新刷新页面
		isChange: function (n, o) {
			if (this.isSearchState) {
				this.handleSearchRefresh(this.page, this.size);
			} else {
				this.getshowDate();
			}
		},
	},
	methods: {
		handleCommand(command) {
			if (command == 'on') {
				this.isChosen = true; //启动菜单样式
				this.dialogTableVisible = true;
				this.getTrafficInfoData(this.page, this.size); //发送请求获取数据
			} else {
				this.isChosen = false; //关闭菜单样式
				this.dialogTableVisible = false;
			}
		},
		// 请求数据
		getTrafficInfoData(page, size) {
			this.$http.get(`/auditEvent?page=${page}&size=${size}`).then((res) => {
				const { code, total, message, result } = res;
				if (code == 0) {
					this.trafficInfoData = result.data;
					this.total = result.total;
					this.trafficInfoAllData = result.dataAll;
				}
			});
		},
		// ----------------------------------------翻页相关----------------------------------------------
		// 改变每页显示数
		handleSizeChange(val) {
			this.size = val;
			this.getshowDate();
			// this.getTrafficInfoData(this.page, this.size);
		},
		// 翻页
		handleCurrentChange(val) {
			this.page = val;
			this.getshowDate();
			// this.getTrafficInfoData(this.page, this.size);
		},
		// -----------------------------------------审核相关----------------------------------------------
		// 审核通过函数
		handleClickPass(id) {
			this.$http.put(`/auditEvent/${id}`, { event_status: 2 }).then((res) => {
				const { code, message } = res;
				this.isChange++;
				console.log(res);
				if (code == 0) {
					this.$message.success(message);
				}
			});
		},
		// 审核忽略函数
		handleClickIgnore(id) {
			this.$http.put(`/auditEvent/${id}`, { event_status: 1 }).then((res) => {
				const { code, message } = res;
				this.isChange++;
				console.log(res);
				if (code == 0) {
					this.$message.success(message);
				}
			});
		},
		// 事件类型筛选
		filterHandler(value, row) {
			console.log(row);
			console.log(row.event_type);
			return row.event_type === value;
		},
		// -----------------------------------------审核样式相关--------------------------------------------
		tableRowClassName({ row, rowIndex }) {
			if (row.event_status == 0) {
				return 'noPass-row';
			} else {
				return 'pass-row';
			}
		},
		// 关键字搜索
		handleinput() {
			this.isSearchState = true; //进入搜索模式
			this.page = 1;
			console.log('开始搜索');
			let str = ['', ...this.searchValue, ''].join('.*');
			let reg = new RegExp(str);
			this.trafficInfoSearch = this.trafficInfoAllData.filter(
				(item) =>
					reg.test(item.user_name) ||
					reg.test(item.event_type) ||
					reg.test(item.event_status) ||
					reg.test(item.event_mark) ||
					reg.test(item.event_describe) ||
					reg.test(item.event_addr)
			);
			this.total = this.trafficInfoSearch.length;
			this.getshowDate(); //搜索后立即加载
		},
		// 搜索状态下审核事件后重新发送请求
		handleSearchRefresh(page, size) {
			// 存在问题，搜索状态下需要点击两次
			this.$http.get(`/auditEvent?page=${page}&size=${size}`).then((res) => {
				const { code, total, message, result } = res;
				if (code == 0) {
					this.trafficInfoAllData = result.dataAll;
					let str = ['', ...this.searchValue, ''].join('.*');
					let reg = new RegExp(str);
					this.trafficInfoSearch = this.trafficInfoAllData.filter(
						(item) =>
							reg.test(item.user_name) ||
							reg.test(item.event_type) ||
							reg.test(item.event_status) ||
							reg.test(item.event_mark) ||
							reg.test(item.event_describe) ||
							reg.test(item.event_addr)
					);
					this.getshowDate();
				}
			});
		},
		// 分页展示
		getshowDate() {
			if (this.isSearchState) {
				// 搜索状态
				const start = (this.page - 1) * this.size; //起始下标（包含）
				const end = (this.page - 1) * this.size + this.size; //结束下标（不包含）
				this.trafficInfoData = this.trafficInfoSearch.slice(start, end);
			} else {
				this.getTrafficInfoData(this.page, this.size);
			}
		},
		// 重置页面
		refresh() {
			console.log('重置页面');
			this.searchValue = '';
			this.isSearchState = false;
			this.getshowDate();
		},
		// 关闭弹窗
		handleClose() {
			this.dialogTableVisible = false;
			this.isChosen = false;
		},
	},
};
</script>

<style scoped>
.chosen {
	/* 激活菜单样式 */
	background-color: antiquewhite !important;
	color: darkcyan !important;
}
.RodeInfo-elDropdown {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 5px;
	z-index: 11;
	border-radius: 10px;
	border-bottom: 2px solid white;
	font-size: 16px;
	font-weight: 500;
	background-color: rgba(248, 248, 132, 0.7);
}
.title {
	font-size: 18px;
}
.RodeInfo-elDropdown:hover {
	cursor: pointer;
	font-weight: 900;
	background-color: antiquewhite;
	color: darkcyan;
	box-shadow: 1px 1px 0px 0px;
	transition: all 0.2s ease-in-out;
}
/* 搜索栏 */
.div-search {
	margin-bottom: 10px;
	float: right;
}
.div-search input {
	width: 200px;
	height: 30px;
	border: 1px solid rgb(75, 79, 72);
	outline: none;
	border-radius: 5px;
	padding-left: 10px;
}
.div-search button {
	margin: 0 5px;
	width: 50px;
	height: 30px;
	border-radius: 5px;
	border: 1px solid rgb(194, 189, 189);
}
.div-search button:hover {
	background: #b3e19d;
}
.rodeInfo-type {
	float: right;
	padding: 0;
	margin: 0;
	width: 35px;
	height: 50px;
}
.rodeInfo-type span {
	border: 1px solid rgb(179, 174, 174);
}
/* 通过与未通过样式 */
.el-table .noPass-row {
	background: #f0f9eb !important;
}

.el-table .pass-row {
	background: oldlace !important;
}
</style>
